<template>
  <div class="detail-wrapper order-detail-wrapper">
    <PageTitle title="返回订单列表" />

    <div class="detail-content">
      <div class="detail-box">
        <div class="detail-title-box">
          <span>订单概要</span>
        </div>

        <div class="detail-info base-info">
          <div class="info-box">
            <div class="item">
              <p>订单号</p>
              <p>{{ detail.orderSn }}</p>
            </div>
            <div class="item">
              <p>订单类型</p>
              <p>{{ detail.orderType === 1 ? '续费' : '新购' }}</p>
            </div>
            <div class="item">
              <p>订单状态</p>
              <p>{{ handelStatus(detail.status) }}</p>
            </div>
            <div class="item">
              <p>付款类型</p>
              <p>{{ handelPayType(detail.payType) }}</p>
            </div>
            <div class="item">
              <p>客户类型</p>
              <p>{{ detail.accountType === 1 ? '直客' : '伙伴' }}</p>
            </div>
          </div>
          <div class="info-box">
            <div class="item">
              <p>客户账号</p>
              <p>{{ detail.accountName }}</p>
            </div>
            <div class="item">
              <p>支付时间</p>
              <p>{{ detail.payTime }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="detail-box">
        <div class="detail-title-box">
          <span>订单详情</span>
        </div>

        <div class="detail-info order-info">
          <div class="info-table">
            <ul>
              <li>
                <p>产品名称</p>
                <p>{{ detail.productName }}</p>
              </li>
              <li>
                <p>数量</p>
                <p>{{ detail.total }}</p>
              </li>
              <li>
                <p>付款方式</p>
                <p>{{ detail.payStyle === 1 ? '包年包月' : '按流量计费' }}</p>
              </li>
            </ul>
            <div class="config-info">
              <p class="title">具体配置：</p>

              <div class="item-box">
                <!-- {{ detail.detail }} -->
                <p v-html="detail.detail"></p>
                <!-- <div class="item">
                  <p>实例:16核125G ecs.qn7e ecs-6</p>
                  <p>I/0 优化实例:I/0 优化实例</p>
                  <p>系统盘:增强型SSD云盘 /dev/xvda 1400GB PL0</p>
                </div>
                <div class="item">
                  <p>带宽:100Mbps 按使用流量</p>
                  <p>CPU:16核</p>
                  <p>可用区:华东 1可用区J</p>
                  <p>操作系统:CentOS 7.6 64位 Linux 64位</p>
                  <p>内存:125GB</p>
                </div> -->
              </div>
            </div>
          </div>

          <div class="other-info">
            <p>订单原价: ￥{{ detail.orderPrice }}</p>
            <p>应付金额: ￥{{ detail.payPrice }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getOrderDetail } from '@/api/index';
import { useRoute } from 'vue-router';
const route = useRoute();

import PageTitle from '@/components/PageTitle.vue';

let detail = ref({});

function getOrderInfo() {
  getOrderDetail(route.query.id).then(res => {
    console.log(res);
    detail.value = res.data;
  });
}

function handelStatus(status) {
  const statusMap = {
    '-1': '已取消',
    0: '待支付',
    1: '已支付',
    2: '已退款'
  };

  return statusMap[status] || '';
}

function handelPayType(type) {
  const typeMap = {
    1: '余额',
    2: '算力券',
    3: '算力券 + 余额'
  };

  return type ? typeMap[type] : '';
}

onMounted(() => {
  getOrderInfo();
});
</script>

<style lang="scss" scoped>
.order-detail-wrapper {
  .base-info {
    .info-box {
      display: flex;
      align-items: center;

      &:first-of-type {
        margin-bottom: 40px;
      }

      .item {
        min-width: 200px;
        margin-right: 20px;

        p {
          &:nth-of-type(1) {
            margin-bottom: 10px;
            color: #888;
          }

          .el-text {
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .order-info {
    .info-table {
      margin-bottom: 20px;
      background-color: #f5f5f5;
      border: 1px solid #ebebeb;

      ul {
        display: flex;

        li {
          flex: 1;

          p {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;

            &:last-of-type {
              background-color: #fff;
            }
          }
        }
      }

      .config-info {
        padding: 20px;
        .title {
          margin-bottom: 12px;
          font-size: 16px;
        }

        .item-box {
          display: flex;

          .item {
            flex: 1;

            p {
              line-height: 24px;
            }
          }
        }
      }
    }

    .other-info {
      padding-right: 40px;

      p {
        margin-bottom: 10px;
        font-size: 16px;
        text-align: right;
      }
    }
  }
}
</style>
